<template>
  <div class="bodys">
    <div class="remen">
      <van-grid
        v-if="lei[0]"
        :column-num="lei[0].lei"
        :border="border[0].border"
        :clickable="true"

      >
        <van-grid-item
          v-for="(item, index) in ToRecommend"
          :key="index"
          :icon="item.iconUrl"
          :text="item.name"
           :badge="item.badge>0?item.badge:''" 
          @click="wang([item.id, index])"
        />
        <!-- 分类详情     :to="item.to ? item.to : '/fenlxiangqing'"-->
      </van-grid>
    </div>
  </div>
</template>

<script>
import { Image } from "vant";
import { Grid, GridItem } from "vant";
export default {
  name: "recommend",
  props: ["tobufenl"],
  components: {
    [Image.name]: Image,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    // [VanImage.name]: VanImage,
  },
  data() {
    return {
      // 轮播图
      // imgs: [],
      ToRecommend: [],
      // 这个是你需要的列数
      lei: [],
      // 要不要开启边界线
      border: [],
      // 需要跳转的位置
      url: [],
    };
  },
  watch: {
    // 使用监听的方式，监听数据的变化
    tobufenl(val) {
      // console.log(val);
      this.url = val[3];
      // console.log(this.url);
      this.ToRecommend = val[0];
      // console.log(this.ToRecommend);
      this.lei = val[1];
      this.border = val[2];
      // console.log(this.lei[0].lei)
      // console.log( this.lei)
      // console.log(this.url);
    },
  },
  created() {
    this.nadaoshuju();
  },
  mounted() {
    console.log("进去了");
  },
  methods: {
    // 拿到数据
    nadaoshuju() {},
    wang(e) {
    
        this.$router.push({
          path: this.url[0].url,
          query: { userId: e[0] },
        });
      
    },
    // 数据处理
  },
};
</script>

<style lang="less" scoped>
// .bodys {

// }

// 子元素的居中
.flexJu {
  display: flex;
  // justify-content: center;
  align-content: start;
}

// .remen {
//   // background:linear-gradient(rgb(255, 255, 255)50%,rgb(238, 238, 238)50%);
//   // background: linear-gradient(#99d9ea 50%, #00a2e8 50%);
//   // background-color: rgb(255, 255, 255);
// }
</style>

